<template>
  <div class="login-page">
      <div class="login-card">
        <el-form :model="form" label-width="auto">

          <div class="login-title">系统登录</div>

          <el-form-item label="用户名" style="width: 90%;margin-bottom: 30px">
            <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="user"/>
          </el-form-item>

          <el-form-item label="Password" style="width: 90%;margin-bottom: 50px">
            <el-input v-model="form.password" placeholder="请输入密码" prefix-icon="lock"
                      :type="passwordVisible?'text':'password'"
                      :suffix-icon="passwordVisible?'view':'hide'"
                      @click="passwordVisible = !passwordVisible"
            />
          </el-form-item>


          <el-form-item>
            <el-button type="primary" @click="login" style="width:100%">登录</el-button>
          </el-form-item>

        </el-form>
      </div>
    </div>
</template>


<script setup>
import {onMounted, onUnmounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import {useCounterStore} from "@/stores/counter.js";

// 在 setup 中使用
const router = useRouter()
import service from '@/utils/request'

let passwordVisible=ref(false);

let form = ref({username: 'bianque', password: 'bianque123'})
let counter = useCounterStore()

function login() {
  service.post("/user/login?username=" + form.value.username + "&password=" + form.value.password).then(
      res => {
        if (res.data != null) {
          //1.将userid存入pinia
          counter.vo_user.value = res.data
          //2.路由跳转
          router.replace({path: "/"})
        } else {
          //给提示
        }
      }
  )
}
</script>
<style>
.login-page {
  display: flex;
  justify-content: center; /* 水平依然居中 */
  /* 关键：垂直方向使用 align-items: flex-start + 固定上间距，实现中上位置 */
  align-items: flex-start;
  padding-top: 220px; /* 距离顶部100px，数值越大越靠下，越小越靠上 */
  min-height: 100vh;
  width: 100vw;
  margin: 0;
  background-color: #ffffff;
  box-sizing: border-box;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
  0 1px 6px rgba(0, 0, 0, 0.1);
  border: none;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

.login-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2329;
  text-align: center;
  margin-bottom: 30px; /* 标题与下方表单的距离加大 */
  padding-bottom: 15px;
  border-bottom: 1px solid #f5f5f5;
}

/* 输入框和按钮微调，增加内部留白 */
:deep(.el-input) {
  border-radius: 6px;
  height: 44px; /* 输入框加高，内部空间更充足 */
}

:deep(.el-form-item) {
  margin-bottom: 25px; /* 表单项之间的距离加大 */
}

:deep(.el-button) {
  border-radius: 6px;
  height: 44px; /* 按钮加高，与输入框呼应 */
  padding: 0 20px; /* 按钮内部左右留白 */
}
</style>